<template>
  <section class="content" style="position: relative;">
    <panel :expandable="false" :expand="true" color="#67c23a">
      <template slot="title">商品查询</template>
      <template slot="body">
        <el-row>
          <el-col :span="8">
             <el-input :placeholder="placeholder" v-model="searchValue" class="input-with-select">
              <el-select v-model="select" slot="prepend" placeholder="请选择" style="width:120px">
                <el-option v-for="t in types" :label="t.text" :value="t.value" :key="t.value"></el-option>
              </el-select>
            </el-input>
          </el-col>
          <el-col :span="14"  class="button-mystyle">
            <el-button type="success" class="but-search" @click="handleSearch">搜索</el-button>
            <el-button type="primary" v-if="$_has('sys:goods:add')" @click='toPath("/v1/goods/addOrEdit")'>新增商品SKU</el-button>
            <!-- <el-button type="primary" @click="exportFile">商品导出</el-button>
            <el-dropdown split-button type="primary" @command="command" style="margin-left: 10px">
              商品导入
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="download">模版下载</el-dropdown-item>
                <el-dropdown-item command="import">商品导入</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </el-col>
        </el-row>
      </template>
    </panel>
    <div class="table clearfix" >
      <!-- <template slot="title">商品列表</template> -->

        <el-table
          :data="list"
           :header-cell-style="{background:'#F5F7FA',height:'60px','line-height':'60px',color:'#606266','font-size':'14px'}"
         >
          <el-table-column
            align="center"
            label="商品图片"
            width="180">
            <template slot-scope="scope">
            <div class="imgW">
                <img v-if="scope.row.goodsPic" :src="scope.row.goodsPic" alt="">
                <img v-else src="@/assets/noPic.png" alt="">
            </div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            header-align="center"
            label="商品信息"
            min-width="200">
            <template slot-scope="scope">
              <p>
                <label>商品SKU：</label>
                <span>{{scope.row.sku}}</span>
              </p>
              <p>
                <label>商品名称：</label>
                <span>{{scope.row.goodsCn}}</span>
              </p>
              <p>
                <label>品牌名称：</label>
                <span>{{scope.row.brandName}}</span>
              </p>
            </template>
          </el-table-column>
          <!--<el-table-column-->
            <!--align="center"-->
            <!--prop="stockQty"-->
            <!--label="库存总量">-->
          <!--</el-table-column>-->
          <el-table-column
            align="center"
            label="重量(kg)">
            <template slot-scope="scope">
              {{scope.row.weight | reserveDecimal}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="尺寸(mm)"
             min-width="200">
            <template slot-scope="scope">
              长:{{scope.row.length ? scope.row.length : 0}}&nbsp; &nbsp;
              宽:{{scope.row.wide ? scope.row.wide : 0}}&nbsp; &nbsp;
              高:{{scope.row.height ? scope.row.height : 0}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="code"
            label="状态">
            <template slot-scope="scope">
              {{analysisStatus.get(scope.row.status)}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            min-width="200"
            label="操作">
              <template slot-scope="scope">
                <div class="myicon-option">
                  <i class="el-icon-mylook" @click="handleDetail(scope.row)"  title="查看"></i>
                  <i class="el-icon-myedit" @click="handleEdit(scope.row)"    title="编辑"></i>
                  <i class="el-icon-mydelete"  @click="handleRemove(scope.row)"  title="删除"></i>
                </div>
              </template>
          </el-table-column>
        </el-table>
        <div class="clear-fix">
          <el-pagination
            style="float: right; margin-top: 20px;"
            background
            layout="total,prev, pager, next"
            @current-change="handleCurrentChange"
            :pager-count="6"
            :current-page.sync="searchParam.page"
            @prev-click="handlePrev"
            @next-click="handleNext"
            :total="searchParam.total">
          </el-pagination>
        </div>
    </div>
  </section>
</template>

<script>
/**
 * TODO:
 *  1. 商品导入导出功能
 */
  import instance from '@/api/index.js'
  import Panel from '@/components/common/panel'
  import {download} from '@/js/util'

  export default {
    name: "productList",
    data(){
      return{
        // item:'',
        // productList:[],//获取商品列表
        // productListParam:{},//商品列表查询
        analysisStatus:new Map,//状态解析
        // productClassify:[],//根据分类层级查询分类信息
        // forEachIndex:0,//递归下标
        // productClassifyMap:new Map,//获取子叶商品分类
        // productSelect:[],//解析Map数据
        // selectCategoryId:'',
        // brandSelectChoose:"",//品牌下拉选择
        // brandSelectList:[],//品牌下拉列表
        // productName:"",//搜索商品名称和商品货号
        // activeIssue:0,//添加class
        // pages:{
        //   total:0,
        //   pageNum:1,
        //   current:1
        // },

        // allCategoryAnalysis:[],//商品分类
        // allCategory:[],
        // classificationList:[],
        // formData: {
        //   // 传给后台的id
        //   inspectObject: "",
        //   // 输入框显示的
        //   inspectObjectName: ""
        // },
        // // 是否显示巡检对象的树状选择器
        // isShowSelect: false,
        // // 巡检对象的选项数据
        // inspectionObjectOptions: [],
        // // 巡检对象的选项的配置参数
        // defaultProps: {
        //   id: "categoryId",
        //   label: 'categoryName',
        //   children: 'children'
        // },

        select: 4,
        types: [{text: "商品名称", value: 3}, {text: "商品SKU", value: 4}],
        searchValue: "",
        list: [],
        searchParam: {
          page: 1,
          rows: 10,
          total: 0
        }
      }
    },
    methods:{
      command(data) {
        console.log(data);
        switch(data) {
          case "download":// 下载模版文件
            // TODO: 模版地址
            let url = baseURL+'/v1/declare/download';
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', '报关单模板');
            document.body.appendChild(link);
            link.click();
          break;
          case "import":// 导入

          break;
        }
      },
      // 详情
      handleDetail(item) {
        this.$router.push({path:"/v1/goods/addOrEdit",query:{sku:item.sku,readonly:true}});
      },
      // 编辑
      handleEdit(item) {
        this.$router.push({path:"/v1/goods/addOrEdit",query:{sku:item.sku}});
      },
      // 删除
      handleRemove(item) {
        let self = this;
        this.$confirm('此操作将删除此商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: ''
        }).then(() => {
          instance({
            method: 'post',
            url: '/v1/goods/delete',
            params: {id: item.id}
          }).then(function (data) {
            self.getProductList();
          })
        }).catch(() => {

        })
      },
      getProductList() {
        let self = this;
        let param = {
          page: this.searchParam.page,
          rows: this.searchParam.rows,
        };
        if(this.searchValue != null && this.searchValue != '') {
          param.name = this.searchValue;
          param.type = this.select;
        }

        instance({
          method: 'post',
          url: 'v1/goods/getList',
          params: param
        }).then(function (data) {
          if(data.data.success){
            self.list = data.data.data.list;
            self.searchParam.total = data.data.data.total;
          }
        }).catch(function (err) {

        })
      },
      handlePrev(pageIndex) {
        this.searchParam.page = pageIndex;
        this.getProductList();
      },
      handleNext(pageIndex) {
        this.searchParam.page = pageIndex;
        this.getProductList();
      },
      handleCurrentChange(pageIndex) {
        this.searchParam.page = pageIndex;
        this.getProductList();
      },
      handleSearch() {
        this.searchParam.page = 1;
        this.getProductList();
      },

      toPath:function (routers) {
        this.$router.push({path:routers})
      },

      exportFile: function() {
        // download({
        //   url: '/v1/goods/getList',
        //   //data: param,
        //   fileName: "产品列表.xlxs",
        //   data: {},
        //   //fileType: ""
        // });
      }
    },
    created(){
      // this.getItem();
      //获取商品列表数据
      this.getProductList();
      //获取商品分类下拉列表
      // this.getAllCategory();
      //商品品牌下拉列表
      // this.getProductBrand();
      this.analysisStatus.set(0,"未上架");
      this.analysisStatus.set(1,"上架中");
      this.analysisStatus.set(2,"删除");
      },
    components: {
      Panel
    },
    filters:{
      reserveDecimal:function (val) {
        var f = parseFloat(val);
        if (isNaN(f)) {
          return 0;
        }
        var f = Math.round(val*100)/100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + 2) {
          s += '0';
        }
        return s;
      }
    },
    computed: {
      placeholder() {
        return "请输入您要查询的" + (["", "商品分类", "品牌", "商品名称", "商品编码"])[this.select];
      }
    }
  }


</script>
<style scoped lang="less">
  .objectTree {
    position: absolute!important;
    overflow: auto;
    z-index: 100;
    width: 100%;
    height: 300px;
    border: 1px solid #cccdce;
    border-top: none;
  }
  .el-input__inner{
    line-height: 34px!important;
    height: 34px!important;
  }
  .el-input__inner{
    line-height: 34px!important;
    height: 34px!important;
  }
  .el-date-editor.el-input{
    width: 100%!important;
  }
  .imgW{
    width: 120px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content:center;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
  .imgW img{
    height: 100%;
  }
  .treeSelect{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    z-index: 99;
    background: rgba(255,255,255,0);
  }
  .table{
       font-size: 14px;
      margin-top: 30px;
     background: #fff;
     padding:20px;
     clear: both;
     overflow: hidden;
      .cell{
       display: flex;
      justify-content: center;
      align-items: center;
      .myicon-option{
        font-size: 18px;
        color: #409EFF;
        margin: 6px;
        cursor:pointer;

        i{
          display: inline-block;
          width: 18px;
          height: 18px;
          margin:  0 12px;
          &.el-icon-myedit{
            background:url('../../../assets/img/myEdit.png') no-repeat;
            background-size: 100%;
          }
          &.el-icon-mylook{
              background:url('../../../assets/img/myLook.png') no-repeat;
              background-size: 100%;
          }
          &.el-icon-mydelete{
              background:url('../../../assets/img/myDelete.png') no-repeat;
              background-size: 100%;
          }
        }
      }
    }
  }
  .button-mystyle{
       button{
           padding: 12px 21px;
           margin:  0 9px;
           border-radius: 4px;
           &.but-search{
              margin-left: 20px;
           }
      }
  }
</style>
